<template>
    <div style="box-shadow: 5px 5px 10px 0px  rgba(0, 0, 0, 0.2);">
        <br>
        <el-form :inline="true" :model="shopSearch" class="demo-form-inline">
        <el-form-item label="店铺名">
          <el-input v-model="shopSearch.shop_name" placeholder="店铺名" clearable />
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input v-model="shopSearch.shop_address" placeholder="店铺地址" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPage">搜索</el-button>
          
        </el-form-item>
      </el-form>
      <el-divider />
    
      <el-table :data="shop" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="shop_name" label="店铺名"  />
          <el-table-column prop="shop_address" label="店铺地址"  />
          <el-table-column prop="shop_explain" label="店铺介绍" />
          <el-table-column prop="start_price" label="起送价" />
          <el-table-column prop="delivery_price" label="配送费" />
          <el-table-column prop="start_time" label="开业时间" />
          <el-table-column prop="end_time" label="歇业时间" />
          <el-table-column prop="recommend" label="推荐优先级" />
          <el-table-column  label="操作" >
            <template #default="scope">
              <el-button size="small"  @click="recommend(scope.row)">
                推荐商家
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      <el-divider />
    
    
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[2, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
    

      </div>
    
    </template>
    
    <script setup>
    import axios from 'axios';
    import { ref, reactive, onBeforeMount } from 'vue'
    import qs from 'qs'
    import { ElMessage,ElMessageBox } from 'element-plus'
    const shopSearch=reactive({
      shop_name:'',
      shop_address:''
    })
    const shop=ref([])

    const total=ref(0)
    const currentPage=ref(1)
    const pageSize=ref(2)


    const recommend=(row)=>{
      ElMessageBox.confirm(
        '是否推荐该商家',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
      .then(() => {
        axios.put('http://localhost:7444/shop/recommendShop',row)
        .then(response=>{
         getPage();
        })
      })
    }
   const getPage=()=>{
        axios.get('http://localhost:7444/shop/pageSelectShop?'+qs.stringify({
          pageNum:currentPage.value,
          pageSize:pageSize.value,
          shop_name:shopSearch.shop_name,
          shop_address:shopSearch.shop_address
        })).then((response)=>{
          if(response.data.code==200){
            shop.value=response.data.data.list;
            total.value = response.data.data.totalCount;
          }
        })
    }
    const handleSizeChange = (val) => {
      console.log(val);
      pageSize.value = val; 
      getPage(); 
    };
    const handleCurrentChange = (val) => {
      console.log(val);
      currentPage.value = val;
      getPage(); 
    };
    onBeforeMount(()=>{
        getPage();
    })
    </script>
    
    <style lang="scss" scoped>
    
    </style>